import React , {useState,useEffect} from 'react'
import Button from 'react-bootstrap/Button';
import Badge from 'react-bootstrap/Badge';

/// props.offtask
/// props.onViewClick
/// props.onDeleteClick
function ResourceCell(props) {

  const [typeName, setTypeName] = useState('未知类型任务') ;

  useEffect(() => {
    if( props.offtask.mode===0 ) setTypeName("区域统计") ;
    else if( props.offtask.mode===1 ) setTypeName("序列分析") ;
    else if( props.offtask.mode===4 ) setTypeName("数据合成") ;
    else if( props.offtask.mode===5 ) setTypeName("数据导出") ;
    else if( props.offtask.mode===6 ) setTypeName("通用离线任务") ;
  }, [])
  

  const onViewClicked = function() 
  {
		props.onViewClick(props.offtask) ;
  }

  const onDeleteClicked = function(){
    props.onDeleteClick(props.offtask.ofid) ;
  }


  return (
    <div className='ResourceCell'>
        <div className='Header'>
            <div className='Title'>{typeName}
            </div>
        </div>
        <div className="CellContent">
            <div style={{margin:'4px'}}><Badge bg="light" text="dark">#{props.offtask.ofid}</Badge >
              {
                (props.offtask.status===0)?<Badge  bg="secondary">排队中</Badge >:""
              }
              {
                (props.offtask.status===1)?<Badge  bg="info">运行中</Badge >:""
              }
              {
                (props.offtask.status===2)?<Badge bg="success">完成</Badge >:""
              }
              {
                (props.offtask.status===3)?<Badge bg="warning">失败</Badge >:""
              }
            </div>
            <div style={{margin:'4px'}}>任务开始时间:{props.offtask.ctime}</div>
            <div style={{margin:'4px'}}>任务结束时间:{(props.offtask.status===2||props.offtask.status===3)?props.offtask.utime:""}</div>
            <div style={{textAlign:'right',margin:'6px'}}>
              {
                (props.offtask.status===2||props.offtask.status===3)
                ?<Button variant="outline-secondary"  size='sm' onClick={onViewClicked}>查看</Button>:""
              }
              <Button variant="outline-danger" 
              size='sm' onClick={onDeleteClicked}
              style={{marginLeft:"8px"}}
              >删除</Button>
            </div>
            
        </div>
    </div>
  )
}

export default ResourceCell


